<!doctype html>//一日游推荐路线
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>图片图层</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="//webapi.amap.com/maps?v=2.0&key=98c485ff1e3c2b4318481832bee4355a&plugin=AMap.Geocoder"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" >
    var imageLayer = new AMap.ImageLayer({
        url: 'http://yyjcs.top/dtdmeo/1.jpg',
        bounds: new AMap.Bounds(
            [116.392159,39.913331],  //x
            [116.401858,39.923715]   //y
        ),
        zooms: [15, 20]
    });
    var map = new AMap.Map('container', {
        center: [116.39705,39.917301],
        zoom: 15,
        layers: [
            AMap.createDefaultLayer(),
            imageLayer,
        ]
    });

//点添加
//1
    var marker1=new AMap.Marker({
        position:new AMap.LngLat(116.397228,39.913582),
        title:'午门',
        map:map
    });
    marker1.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"1午门"
    })
//2
    var marker2=new AMap.Marker({
        position:new AMap.LngLat(116.395276,39.915166),
        title:'断虹桥',
        map:map
    });
    marker2.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"2断虹桥"
    })
//3
    var marker3=new AMap.Marker({
        position:new AMap.LngLat(116.394608,39.915452),
        title:'武英殿',
        map:map
    });
    marker3.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"3武英殿"
    })
//4
    var marker4=new AMap.Marker({
        position:new AMap.LngLat(116.39441,39.919048),
        title:'慈宁宫',
        map:map
    });
    marker4.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"4慈宁宫"
    })
//5
    var marker5=new AMap.Marker({
        position:new AMap.LngLat(116.393627,39.919295),
        title:'寿康宫',
        map:map
    });
    marker5.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"5寿康宫"
    })
//6
    var marker6=new AMap.Marker({
        position:new AMap.LngLat(116.395638,39.919772),
        title:'养心殿',
        map:map
    });
    marker6.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"6养心殿"
    })
//7
    var marker7=new AMap.Marker({
        position:new AMap.LngLat(116.395853,39.920216),
        title:'永寿宫',
        map:map
    });
    marker7.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"7永寿宫"
    })
//8
    var marker8=new AMap.Marker({
        position:new AMap.LngLat(116.395119,39.920235),
        title:'太极殿',
        map:map
    });
    marker8.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"8太极殿"
    })
//9
    var marker9=new AMap.Marker({
        position:new AMap.LngLat(116.395106,39.920714),
        title:'长春宫',
        map:map
    });
    marker9.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"9长春宫"
    })
//10
    var marker10=new AMap.Marker({
        position:new AMap.LngLat(116.395778,39.920734),
        title:'翊坤宫',
        map:map
    });
    marker10.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"10翊坤宫"
    })
//11
    var marker11=new AMap.Marker({
        position:new AMap.LngLat(116.395782,39.921192),
        title:'储秀宫',
        map:map
    });
    marker11.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"11储秀宫"
    })
//12
    var marker12=new AMap.Marker({
        position:new AMap.LngLat(116.395128,39.921159),
        title:'咸福宫',
        map:map
    });
    marker12.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"12咸福宫"
    })
//13
    var marker13=new AMap.Marker({
        position:new AMap.LngLat(116.396912,39.920841),
        title:'坤宁宫',
        map:map
    });
    marker13.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"13坤宁宫"
    })
//14
    var marker14=new AMap.Marker({
        position:new AMap.LngLat(116.396919,39.920238),
        title:'乾清宫',
        map:map
    });
    marker14.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"14乾清宫"
    })
//15
    var marker15=new AMap.Marker({
        position:new AMap.LngLat(116.396973,39.91843),
        title:'保和殿',
        map:map
    });
    marker15.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"15保和殿"
    })
//16
    var marker16=new AMap.Marker({
        position:new AMap.LngLat(116.397065,39.917875),
        title:'中和殿',
        map:map
    });
    marker16.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"16中和殿"
    })
//17
    var marker17=new AMap.Marker({
        position:new AMap.LngLat(116.397056,39.917321),
        title:'太和殿',
        map:map
    });
    marker17.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"17太和殿"
    })
//18
    var marker18=new AMap.Marker({
        position:new AMap.LngLat(116.397165,39.915271),
        title:'太和门',
        map:map
    });
    marker18.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"18太和门"
    })
//19
    var marker19=new AMap.Marker({
        position:new AMap.LngLat(116.399345,39.915573),
        title:'文华殿',
        map:map
    });
    marker19.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"19文华殿"
    })
//20
    var marker20=new AMap.Marker({
        position:new AMap.LngLat(116.400375,39.92033),
        title:'宁寿宫',
        map:map
    });
    marker20.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"20宁寿宫"
    })
//21
    var marker21=new AMap.Marker({
        position:new AMap.LngLat(116.400375,39.919701),
        title:'珍宝馆',
        map:map
    });
    marker21.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"21珍宝馆"
    })
//22
    var marker22=new AMap.Marker({
        position:new AMap.LngLat(116.399055,39.919651),
        title:'奉先殿',
        map:map
    });
    marker22.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"22奉先殿"
    })
//23
    var marker23=new AMap.Marker({
        position:new AMap.LngLat(116.399000,39.920215),
        title:'延禧宫',
        map:map
    });
    marker23.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"23延禧宫"
    })
//24
    var marker24=new AMap.Marker({
        position:new AMap.LngLat(116.398387,39.920215),
        title:'景仁宫',
        map:map
    });
    marker24.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"24景仁宫"
    })
//25
    var marker25=new AMap.Marker({
        position:new AMap.LngLat(116.398387,39.920766),
        title:'承乾宫',
        map:map
    });
    marker25.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"25承乾宫"
    })
//26
    var marker26=new AMap.Marker({
        position:new AMap.LngLat(116.399000,39.920803),
        title:'永和宫',
        map:map
    });
    marker26.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"26永和宫"
    })
//27
    var marker27=new AMap.Marker({
        position:new AMap.LngLat(116.399000,39.921268),
        title:'景阳宫',
        map:map
    });
    marker27.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"27景阳宫"
    })
//28
    var marker28=new AMap.Marker({
        position:new AMap.LngLat(116.398387,39.921253),
        title:'钟粹宫',
        map:map
    });
    marker28.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"28钟粹宫"
    })
//29
    var marker29=new AMap.Marker({
        position:new AMap.LngLat(116.39682,39.921459),
        title:'御花园',
        map:map
    });
    marker29.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"29御花园"
    })
//30
    var marker30=new AMap.Marker({
        position:new AMap.LngLat(116.396786,39.922305),
        title:'神武门',
        map:map
    });
    marker30.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"30神武门"
    })
// 矢量图 路线规划

var path=[//每个弧线段有两种描述方式
    [116.397206,39.913489],//起点
	[116.397206,39.914689],
	[116.395276,39.915166],
	[116.394608,39.915152],
	[116.394608,39.915452],
	[116.394608,39.915152],
	[116.395276,39.915166],
	[116.395276,39.918490],
	[116.39441,39.918490],
	[116.39441,39.919048],
	[116.393627,39.919295],
	[116.39441,39.919048],
	[116.39441,39.918490],
	[116.39501,39.918490],
	[116.39501,39.919930],
	[116.39551,39.919930],
	[116.39551,39.921600],
	[116.39629,39.921600],
	[116.39629,39.921300],
	[116.39720,39.921300],
	[116.396912,39.920841],
	[116.396919,39.920238],
	[116.396973,39.91843],
	[116.397065,39.917875],
	[116.397165,39.915271],
	[116.397165,39.915001],
	[116.399000,39.915001],
	[116.399000,39.914801],
	[116.399500,39.914801],
	[116.399500,39.915201],
	[116.399500,39.914801],
	[116.399000,39.914801],
	[116.399000,39.918501],
	[116.399900,39.918501],
	[116.399900,39.919801],
	[116.400300,39.919801],
	[116.398890,39.919801],
	[116.398890,39.921500],
	[116.397090,39.921500],
	[116.397090,39.922500],
        //路线图

];
var polyline = new AMap.Polyline({
      path: path,
      isOutline: true,
      outlineColor: '#ffeeff',
      borderWeight: 3,
      strokeColor: "#3366FF",
      strokeOpacity: 1,
      strokeWeight: 6,
      // 折线样式还支持 'dashed'
      strokeStyle: "solid",
      // strokeStyle是dashed时有效
      strokeDasharray: [10, 5],
      lineJoin: 'round',
      lineCap: 'round',
      zIndex: 50,
    })
    map.add([polyline]);
    map.setFitView();
</script>
</body>
</html>
